<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机密码生成器</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>🔐 随机密码生成器</h1>
            <p>创建强密码，保护您的账户安全</p>
        </header>

        <main class="main">
            <!-- 密码显示区域 -->
            <section class="password-section">
                <div class="password-container">
                    <input type="text" id="password-output" readonly placeholder="生成的密码将显示在这里">
                    <button id="copy-btn" class="copy-button" title="复制到剪贴板">
                        📋 复制
                    </button>
                </div>
                
                <!-- 密码强度指示器 -->
                <div class="strength-indicator">
                    <div class="strength-text" id="strength-text">密码强度: 未生成</div>
                    <div class="strength-bars">
                        <div class="strength-bar" id="strength-bar-1"></div>
                        <div class="strength-bar" id="strength-bar-2"></div>
                        <div class="strength-bar" id="strength-bar-3"></div>
                        <div class="strength-bar" id="strength-bar-4"></div>
                    </div>
                </div>
            </section>

            <!-- 配置选项 -->
            <section class="options-section">
                <!-- 密码长度滑块 -->
                <div class="option-group">
                    <div class="option-label">
                        <span>密码长度: <span id="length-value">12</span></span>
                    </div>
                    <input type="range" id="length-slider" min="6" max="32" value="12" class="slider">
                </div>

                <!-- 字符集选项 -->
                <div class="option-group">
                    <div class="checkbox-group">
                        <input type="checkbox" id="uppercase" checked>
                        <label for="uppercase">包含大写字母 (A-Z)</label>
                    </div>
                    
                    <div class="checkbox-group">
                        <input type="checkbox" id="lowercase" checked>
                        <label for="lowercase">包含小写字母 (a-z)</label>
                    </div>
                    
                    <div class="checkbox-group">
                        <input type="checkbox" id="numbers" checked>
                        <label for="numbers">包含数字 (0-9)</label>
                    </div>
                    
                    <div class="checkbox-group">
                        <input type="checkbox" id="symbols" checked>
                        <label for="symbols">包含特殊符号 (!@#$%^&*)</label>
                    </div>
                </div>

                <!-- 生成按钮 -->
                <button id="generate-btn" class="generate-button">
                    🎯 生成密码
                </button>
            </section>

            <!-- 密码统计信息 -->
            <section class="stats-section">
                <div class="stat-item">
                    <span class="stat-label">估计破解时间:</span>
                    <span id="crack-time" class="stat-value">未生成</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">字符多样性:</span>
                    <span id="diversity" class="stat-value">未生成</span>
                </div>
            </section>
        </main>

        <footer class="footer">
            <p>💡 提示: 强密码应至少包含12个字符，并混合使用不同类型的字符</p>
        </footer>
    </div>

    <!-- 复制成功提示 -->
    <div id="toast-notification" class="toast">
        ✅ 已复制到剪贴板
    </div>

    <script src="script.js"></script>
</body>
</html>